<html>

<head>
    <meta charset="utf-8" />
    <title>数据库文档</title>
    <script src="../libs/vue.js"></script>

    <style>
        a {
            color: gray;
        }

        a:hover {
            color: black;
        }

        h1 {
            text-align: center;
        }

        h2 {
            width: 92%;
            margin: 0 auto;
        }

        table {
            margin: 30px auto;
            border-collapse: collapse;
            width: 92%;
        }

        td,
        th {
            border-top: 1px solid lightgray;
            padding: 15px 0;
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;

        }

        tr:last-child {
            border-bottom: 1px solid lightgray;
        }

        tr {
            transition: background-color ease-in 150ms;
        }


        tr:nth-child(even),
        th {
            background-color: #eaeaea;
        }

        tr:hover {
            background-color: lightgray;

        }

        .btn {
            color: gray;
            font-size: 9pt;
            float: right;
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <div id="doc">
        <section v-for="database in list">
            <h1>库：{{database.name}}</h1>

            <diiv v-for="table in database.tableInfo">
                <a :name="table.uuid"></a>
                <br />
                <br />
                <h2>
                    <span class="btn">
                        <a href="javascript:void(0)" @click="showBean(table)" title="查看 Java Bean 代码生成">Bean</a>
                        |
                        <a href="javascript:void(0)" @click="showDDL(table.ddl)" title="查看建表的 CRETAE TABLE 语句">DDL</a>
                    </span>
                    {{table.comment}} {{table.name}}
                </h2>
                <table class="ajaxjs-niceTable" align="center">
                    <thead>
                        <th>字段名</th>
                        <th>类型（长度）</th>
                        <th>长度</th>
                        <th>允许为空</th>
                        <th>默认值</th>
                        <th>字段说明</th>
                    </thead>
                    <tr v-for="col in table.columns">
                        <td width="20%" style="text-align: left; padding-left: 3%;">{{col.name}}</td>
                        <td width="18%">{{col.type}}</td>
                        <td width="15%" align="center">{{col.length}}</td>
                        <td width="10%" align="center">{{col.isRequired ? 'N': 'Y'}}</td>
                        <td width="10%" align="center"></td>
                        <td style="text-align: center;">{{col.comment}}</td>
                    </tr>
                </table>
            </diiv>
        </section>
    </div>
    <script>
        let API_ROOT = 'http://localhost:8080/adp'; // 如果为独立的前端模式，请在这里设置你接口的地址

        if (API_ROOT)
            document.writeln('<script src="json.js"><\/script>');
        else
            document.writeln('<script src="..\/..\/make_database_doc"><\/script>');
    </script>

    <script>

        new Vue({
            el: '#doc',
            data: {
                list: DOC_DATA
            },
            methods: {
                showDDL(ddl) {
                    parent.window.MAIN.showSQL(ddl);
                },
                showBean(table) {
                    parent.window.MAIN.showJava(table);
                }

            }
        });

        let _long = ["int(11)", "bigint"];
        let _int = ["int", "smallint", "mediumint", "integer", "tinyint"];
        let _boolean = ["tinyint(1)"];
        let _float = ["float"];
        let _double = ["double", "decimal"];
        let text = ["char", "varchar", "tinytext", "text", "mediumtext", "longtext"];
        let date = ["date", "datetime", "timestamp"];

        function has(arr, str) {
            for (var i = 0, j = arr.length; i < j; i++) {
                if (str.indexOf(arr[i]) != -1)
                    return true; // found
            }

            return false; // not found
        }

        function sqlType2javaType(type) {
            if (has(text, type))
                return 'String';

            if (has(_long, type))
                return 'Long';

            if (has(_boolean, type))
                return 'Boolean';

            if (has(_int, type))
                return 'Date';

            if (has(_float, type))
                return 'Float';

            if (has(_double, type))
                return 'Double';

            if (has(date, type))
                return 'Date';

            console.log(type);
            return 'Object';
        }

        function firstLetterUpper(str) {
            return str.charAt(0).toUpperCase() + str.slice(1);
        }

        // 下划线转换驼峰
        function toHump(name) {
            return name.replace(/\_(\w)/g, function (all, letter) {
                return letter.toUpperCase();
            });
        }

        // 驼峰转换下划线
        function toLine(name) {
            return name.replace(/([A-Z])/g, "_$1").toLowerCase();
        }
    </script>
</body>

</html>